// ------------------获取分类 处理下拉框------------------------
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    if (res.status === 0) {
      let str = '';
      res.data.forEach(item => {
        str += `
    <option value="${item.id}">${item.name}</option>
    `;
      });
      $('select[name=cate_id]').append(str);
      // 动态创建的下拉框，单选按钮，复选按钮，需要渲染
      let form = layui.form;
      form.render('select');
    }
  },
});

// 调用富文本编辑器
initEditor();
// -------------------------- 处理封面图片 -----------------
// 1. 初始化剪裁框
// 1.1) 初始化图片裁剪器
var $image = $('#image');
// 1.2) 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview',
};
// 1.3) 初始化裁剪区域
$image.cropper(options);

// 2. 点击 “选择封面” 能够选择图片
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click');
});
// 3. 图片切换的时候，更换剪裁区的图片
$('#file').on('change', function () {
  // 3.1) 找到文件对象
  var fileObj = this.files[0];
  // 3.2) 创建url
  var url = URL.createObjectURL(fileObj);
  // 3.3) 更换图片
  $image.cropper('destroy').attr('src', url).cropper(options);
});
// ---------------------------------------------
// -----------------上面是处理页面---------------------
// ---------------------------------------------
// 先抛开插件的使用
// 1.自己手动修改几个分类     2.文章封面，自己加一个文件域
$('form').on('submit', function (e) {
  e.preventDefault();
  let fd = new FormData(this);
  // fd对象中，有content，但是值为空； 根本就没有 图片
  // 1. 获取富文本编辑器里面的内容，并不是追加到fd中，而是更改fd里面的内容
  fd.set('content', tinyMCE.activeEditor.getContent());

  // 2. 剪裁图片，转成 blob 形参（二进制形式或文件对象形式），追加到fd中
  let canvas = $image.cropper('getCroppedCanvas', {
    width: 400,
    height: 280,
  });

  // 把canvas图片转成二进制形式
  canvas.toBlob(function (blob) {
    // 追加文件对象到fd中
    fd.append('cover_img', blob);

    // 检查一下，fd对象中，是否取得了接口要求的所有参赛
    // fd.forEach((val, key) => {
    //     console.log(key, val);
    // });
    // return;
    $.ajax({
      type: 'POST',
      url: '/my/article/add',
      data: fd,
      processData: false, // 不要处理数据；意思是不要把对象形式的fd转换成查询字符串形式
      contentType: false, // 不要加默认的请求头（application/x-www-form-urlencoded），让浏览器自行设置请求头
      success: function (res) {
        layer.msg(res.message);
        // 添加成功，跳转到 文章列表 页面
        location.href = '/article/list.html';
      },
    });
  });
});
